<template>
  <zeng-form
      :configs="formConfigs"
      :model="model"
      @change="onChange"
  >
    <template #models-after>
      <a-button>添加</a-button>
    </template>
  </zeng-form>
  <a-button @click="getUpdateObj">获取更新后的对象</a-button>
  <a-button @click="add">添加数组</a-button>
</template>

<script setup>
import ZengForm from "/@/components/zeng-form.vue";
import { Button as AButton } from "ant-design-vue";
import { reactive, toRaw } from "vue";

const model = reactive({
  title: false,
  models: [
    { title: '模型1' },
    { title: '12' }
  ]
})
const formConfigs = [
  {
    prop: 'title',
    label: '名称',
    defaultValue: true,
    dom: 'Switch',
    columnProps: {
      span: 24
    },
    formItemProps: {
      labelCol: { span: 24 }
    }
  },
  {
    prop: 'models',
    label: '模型',
    children: [
      {
        prop: 'title',
        label: '模型名称',
        defaultValue: 'zeng11',
        dom: 'Input',
      }
    ]
  }
]
function onChange (value, key, { model }) {
  model[key] = value
}
function getUpdateObj () {
  console.log(toRaw(model))
}
function add () {
  model.models.push({ title: 'add' })
}
</script>
